在前一篇文章當中，介紹了瀏覽器的開發者工具中有工具哪些能適時幫助我們建立可訪問的網站。

而今天要來介紹的內容將涵蓋：

• 檢測訪問性的步驟
• 檢測訪問性的工具

檢測訪問性的步驟

由於 WCAG 2.1 與 WCAG 2.0 訪問性規範定義的是對於訪問性的「一致性要求」，若想對自己的網站做初步的檢測，但你從來沒這麼試過，很可能想做卻不知道從何開始，所以接下來想介紹一下評估的步驟（來自 W3C 的 網站可訪問性一致性評估方法 WCAG-EM）雖目前此份文件狀態還是草案，但當中提及的評估步驟還是很有參考價值，很適合讓作為大家在沒頭緒時的第一步，這裡有線上工具，主要是依據 WCAG-EM 方法生成報告。

（圖片來源：WCAG-EM）

第一步、定義評估範圍

1.1 定義網站範圍：

網站是不是有使用第三方服務？就算不同網址的商店，也涵蓋在網站範圍之內？

1.2 確定達成目標：

WCAG 符合級別（A，AA，AAA），以 AA 為公認最推薦的級別。

1.3 定義支援的基準：

也就是整理出我們要支援的瀏覽器與輔助科技裝置（Assistive Technology）列表，我們網頁中可訪問的功能都需要支援列表上的項目。

1.4（選擇性）選擇專業的評估人員，討論評估要求後，產生共識後擬訂文件。

第二步、瀏覽目標網站

評估人員將探索要評估的目標網站，以初步了解該網站及其用途，目的和功能，隨後識別網站的所有常見網頁的列表、基本功能、網路內容的類型與所需的技術等等。

第三步、選擇一個代表性樣品

當無法評估網站上的每個網頁時，針對結構化和隨機選擇的網頁的指南。

第四步、審核選定的樣品

確定滿足WCAG 的成功和失敗、網站功能的無障礙支持，並記錄評估步驟。

第五步、報告結果

匯總和報告評估結果，做出評估聲明，並計算總體得分。

檢測工具

一定要知道「Deque」這間公司

世界知名的公司 deque 的開源專案 axe-core ，包含 Google Lighthouse 在內，很多工具都是倚靠他們的開源專案作為核心來開發的，而 deque 長期專注於提升數位產品的可訪問性，他們也有協助公司來培訓訪問性的觀念與實務應用。

1. axe - 一款 deque 推出的 Chrome Extension

在瀏覽器上裝了 deque 所開發的擴充套件，會在你的開發者工具安裝一個 Tab。

真的非常好用！

擴充套件特點：

• 檢測該頁面後會列出問題、節點、規則與解決方法。
• 使用 Inspect Node 就會直接跳到有問題的節點。
• 使用 Highlight 就會直接在左側的 UI 中，使用 outline 標記出有問題的元素。
• 可以略過你認為目前不是問題的 Issues，並且這些都是有紀錄的。

2. Accessibility Insights for Web - 相依於 deque 核心的 Chrome Extension

擴充套件特點：

• 可自訂快捷鍵啟動自動檢測、顏色、標示標題區域等。
• 自動檢測直接在 UI 上標出不符合標準的部分，點選 ! 都會有違反的規則。
• 因為相依 deque ，規則蠻齊全的。
• 多種模式，其中提供 Accessment 模式，有詳盡的檢測內容，我們可以根據分類一樣樣的來擊破，如下圖。

3. vue-axe - 相依於 deque 核心的 Node Package

在使用 Vue.js 作為框架開發時，我使用的套件，在每次 HMR 重新編譯後，會在開發者工具中的 console 印出「問題」與違反的規則。

規則寫法

• 可以制定你要符合的規範，也可以更細部的客製自己的規則，詳細規則可以查看規則說明。

    {
      runOnly: {
        type: "tag",
        values: ["wcag2a", "wcag2aa"]
      }
    }

• 查看更多關於 Vue 的訪問性實踐：
  • Getting Started with Web Accessibility in Vue - Emily Mears @Medium

4. eslint-plugin-vue-a11y - Linter

• 在有錯誤時，會即時顯示紅線。
• .eslintrc 中的 parser 設定要特別注意設定唷！

React

（圖片來源：web.dev）

因為我目前是使用 Vue.js 作為專案的框架，因此上面介紹了幾個都是與 Vue.js 互相搭配的檢測工具，如果你想了解 React 該使用什麼比較好，請參考以下內容：

1. react-a11y
2. eslint-plugin-jsx-a11y
3. 查看更多關於 React 的訪問性實踐
   • Getting Started with Web Accessibility in React - Emily Mears @Medium

更多的訪問性檢測工具列表：Web Accessibility Evaluation Tools List。

Reference

• Testing Web Accessibility - Adrián Bolonio (Accessibility Talks - August 2019) @Accessibility Talks
• WCAG-EM Overview:Website Accessibility Conformance Evaluation Methodology - W3C
• Web Accessibility Evaluation Tools List - W3C
• Accessibility Guidebook for Web Development - Telerik